<template>
	<view>
		<!-- 结算弹窗 -->
		<u-popup :show="list.show.isShow" mode="bottom" @close="close" @open="open" :closeable="true">
			<view class="popup">
				<view class="head">
					<text>￥{{list.sum}}\n</text>
					<text>请选择支付方式</text>
				</view>
				<view class="type">
					<view class="pay" @click="Paytype('微信支付')">
						<view class="img">
							<image src="../../static/wx.png"></image>
							<view>微信支付</view>
						</view>
						<view>
							<u-icon v-show="payShow==true" name="checkmark" size="24"></u-icon>
						</view>
					</view>
					<view class="pay" @click="Paytype('支付宝支付')">
						<view class="img">
							<image src="../../static/zfb.png"></image>
							<view>支付宝支付</view>
						</view>
						<view>
							<u-icon v-show="!payShow" name="checkmark" size="24"></u-icon>
						</view>
					</view>
				</view>
				<view class="btn">
					<u-button @click="goPay" type="error" shape="circle">立即付款</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapActions,mapState } from 'vuex'
import {addOrder} from '../../api/mock'
	export default {
		name:"good-pay",
		props : {
			list : {
				type : Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				payShow: true, //支付选项
			};
		},
		computed:{
			...mapState('cart',['cartList']),
			...mapState('payorder',['payList']),
		},
		methods:{
			...mapActions('cart',['actionAddrs','actionRemove']),
			// 去支付
			goPay(){
				this.list.show.isShow =false;
				uni.showModal({
					title:'提示',
					content:'是否付款',
					success:(res)=>{
						if(res.confirm){
							uni.showToast({title:'下单成功'})
							this.payList.goodlist.forEach((item)=>{
								item.deal ='待发货'
								this.actionRemove(item);
							})
							// 调用添加到我的订单
							this.getAddOrder();
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/order/order'
								})
							},500)
						}else if(res.cancel){
							this.getAddOrder();
							this.payList.goodlist.forEach((item)=>{
								item.deal ='待付款'
								this.actionRemove(item);
							})
							uni.showToast({
								icon:"none",
								title:'取消付款'
							})
						}
					}
				})
			},
			// 选择付款方式
			Paytype(type){
				console.log(type);
				if(type=='微信支付'){
					this.payShow=false;
				}else{
					this.payShow=true;
				}
				if(type=='支付宝支付'){
					this.payShow=false;
				}else{
					this.payShow=true;
				}
			},
			// 添加到我的订单
			getAddOrder(){
				addOrder(this.payList).then((res)=>{
					console.log('添加到我的订单');
				}).catch((err)=>{
					console.log(err);
				})
			},
			open() {
				 this.list.show.isShow =true;
				 console.log(this.list.show.isShow);
				// console.log('open');
			},
			close() {
				this.list.show.isShow = false;
				// console.log('close');
				console.log(this.list.show.isShow);
			},
		},
		mounted() {
			console.log(this.list);
			console.log(this.list.show.isShow);
			console.log(this.list.sum);
			console.log(this.payList);
		}
	}
</script>

<style>
.popup{
	width: 100%;
	height: 300px;
	background-color: #efefef;
}
.popup .head{
	padding: 20px;
	text-align: center;
}
.popup .head text:nth-child(1){
	font-size: 24px;
}
.popup .head text:nth-child(2){
	font-size: 14px;
	color: #6d6d6d;
}
.popup .type{
	width: 100%;
	background-color: white;
	padding-bottom: 10px;
}
.popup .type .pay{
	width: 94%;
	height: 55px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #e8e8e8;
}
.popup .type .pay .img{
	width: 50%;
	height: 40px;
	display: flex;
	align-items: center;
}
.popup .type .pay .img image{
	width: 18%;
	height: 28px;
}
.popup .type .pay .img view{
	width: 70%;
	margin-left: 10px;
}
.popup .btn{
	margin-top: 35px;
}
.popup .btn .u-button{
	width: 280px;
	height: 35px;
	line-height: 35px;
}
</style>